<template>
  <div class="staffAdd">
    <van-nav-bar :title="title" left-text="" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="Form">
      <van-form @failed="onFailed" @submit="onSubmit">
        <van-cell-group inset>
          <van-field name="uploader" label="员工图片" label-width="100" :rules="[{ required: true, message: '请上传员工图片' }]">
            <template #input>
              <van-uploader v-model="avatar" :max-count="1" :after-read="afterRead" @delete="deleteFile" />
            </template>
          </van-field>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field v-model="name" name="name" label="姓名" label-width="100" placeholder="请输入姓名"
            :rules="[{ required: true, message: '请填写姓名' }]" />
          <!-- <van-field v-model="result" is-link readonly label-width="100" name="选择岗位" label="选择岗位"
            :rules="[{ required: true, message: '请选择岗位' }]" placeholder="点击选择岗位" @click="showPicker = true" /> -->
          <van-field v-model="mobile" name="mobile" label-width="100" label="手机号码" placeholder="请输入手机号码"
            :rules="[{ validator, message: '请输入正确内容' }]" />
          <van-field v-model="password" type="password" name="password" label="密码" label-width="100" placeholder="密码"
            :rules="[{ required: allowPoss, message: '请填写密码' }]" />

        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%)">
            提交
          </van-button>
        </div>
      </van-form>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
    </div>
  </div>
</template>

<script setup>

import { closeToast, showLoadingToast } from "vant";
import {
  showToast
} from 'vant';
import 'vant/es/toast/style';
import { addUser, updateUser } from "@/services";
import { vantUpload, uploadMaterialImg } from '@/services/upLoad'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute()
console.log(route.query, 'route')
import { ref } from "vue";
let title = '新增员工'
const name = ref("");
const avatar = ref([]);
const imgList = ref([])
const password = ref("");
const mobile = ref("");
const result = ref("");
const showPicker = ref(false);
const avtator = ref([]);
const allowPoss = ref(true)
const id = ref('')//员工id
if ((JSON.stringify(route.query) == "{}")) {
  allowPoss.value = true
  id.value = ''
  // console.log(111)
  title = '新增员工'
} else {
  title = '修改员工'
  allowPoss.value = false
  let query = route.query
  name.value = query.name
  mobile.value = query.mobile
  password.value = ''
  imgList.value = [query.avatar]
  avatar.value = [{ url: query.avatar }]
  id.value = query.id
}
const afterRead = async (fileData) => {
  avtator.status = 'uploading';
  avtator.message = '上传中...';
  var dataV = new FormData();//重点--使用formdata添加需要一起传的参数
  dataV.append("file", fileData.file);
  let res = await uploadMaterialImg(fileData)
  imgList.value.push(res.fullurl)
  fileData.message = "上传成功";
  // console.log(res,'上传之后的图片处理')
  // vantUpload(dataV).then((res) => {
  //   // console.log(res);
  //   if (res.data.code === 200) {
  //     fileData.status = "done"; //上传加载状态-完成
  //     imgList.value.push(res.data.data.fullurl)
  //     fileData.message = "上传成功";
  //   } else {
  //     // console.log(res);
  //     fileData.status = "failed"; //上传加载状态-失败
  //     fileData.message = "上传失败";
  //   }
  // });
};
// 返回按钮
const onClickLeft = () => {
  router.back();
};
const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};
// const value4 = ref("");
// const pattern = /\d{6}/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) =>
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
    val
  );
const deleteFile = (e, detail) => {
  // console.log(e,detail,'deleteFile')
  imgList.value.splice(detail.index, 1)
}
const onFailed = (errorInfo) => {
  // console.log(imgList,'imgList')
  // console.log(avatar,'avatar')
  // console.log("failed", errorInfo);
};
const onSubmit = async (val) => {
  // console.log(val, '成功的值')
  const { name, password, mobile } = val
  const getAvtator = imgList.value.join()
  let Form = {
    name,
    password,
    mobile,
    avatar: getAvtator
  }
  console.log(id, 'id')
  if (!id.value) {//没有id的时候新增
    let res = await addUser(Form)
    showToast('添加员工成功');
    empt()
  } else {
    Form['id'] = id.value
    let res = await updateUser(Form)
    showToast('修改员工成功');
    empt()
  }
  router.back();
}
const empt = () => {
  name.value = ref("");
  imgList.value = ref([])
  password.value = ref("");
  mobile.value = ref("");
  avtator.value = ref([]);
}
</script>

<style lang="scss" scoped>
.staffAdd {
  padding: 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  color: #1d1b20;

  .Form {
    margin-top: 50px;
  }
}
</style>
